<template>
  <div class="app-container" ref="appContainer">
    <el-card>
      <div class="card-box">
        <el-form :model="form">
          <el-form-item label="骰子1">
            <el-input v-model="form.touzi1" placeholder="">
            </el-input>
          </el-form-item>
          <el-form-item label="骰子2">
            <el-input v-model="form.touzi2" placeholder="">
            </el-input>
          </el-form-item>
          <el-form-item label="桌子">
            <el-input v-model="form.tableid" placeholder="">
            </el-input>
          </el-form-item>
          <el-form-item label="">
            <el-button type="primary" @click="handleSubmit()">开奖</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <!-- ------------表格--------------->
    <div class="header">
      <el-form :inline="true" class="search-form" :model="selectDate" ref="ruleFormRef">
        <el-form-item label="">
          <el-date-picker v-model="selectDate[0]" type="datetime" placeholder="开始时间" >
          </el-date-picker>
          &nbsp&nbsp&nbsp至&nbsp&nbsp&nbsp
          <el-date-picker v-model="selectDate[1]" type="datetime" placeholder="结束时间" >
          </el-date-picker>
          <!-- <el-date-picker v-model="selectDate" type="datetimerange" range-separator="至" start-placeholder="开始时间"
            end-placeholder="结束时间">
          </el-date-picker> -->
        </el-form-item>
      </el-form>
      <div class="search">
        <el-button type="primary" @click="onclickSearch" :icon="Search">搜索</el-button>
      </div>
    </div>

    <div class="table">

      <el-table v-loading="loading" :data="list" fit highlight-current-row style="width: 100%" show-summary
        :border="true">
        <el-table-column label="id" align="center" prop="id" width="125px">
        </el-table-column>
        <el-table-column label="操作者" align="center" prop="operator" width="125px">
        </el-table-column>
        <el-table-column label="骰子1" align="center" prop="r1" width="125px">
        </el-table-column>
        <el-table-column label="骰子2" align="center" prop="r2" width="125px">
        </el-table-column>
        <el-table-column label="分数" align="center" prop="score" width="125px">
        </el-table-column>
        <el-table-column label="庄" align="center" prop="zhuang" width="125px">
        </el-table-column>
        <el-table-column label="桌子" align="center" prop="tableid" width="125px">
        </el-table-column>
        <el-table-column label="时间" align="center" prop="time" width="225px">
        </el-table-column>


      </el-table>

    </div>


  </div>
</template>
<script lang="ts" setup name="comprehensive">
import { GameConfig } from '@/config/GameConfig'
import { HttpClient } from '@/utils/HttpClient'
import { UIHelper } from '@/utils/UIHelper'
import { now } from 'lodash'
import { Search } from '@element-plus/icons-vue'
import { ref, onMounted, reactive } from 'vue'
import { Logger } from '@/engine/util/Logger'
import { DateUtil } from '@/engine/util/DateUtil'

let form = ref({ touzi1: '1', touzi2: '1', tableid:"1" })
const loading = ref(false)
let nowDate: Date = new Date()
const selectDate = ref([
  new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate() - 1),
  new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate() + 1)
])

let list = reactive([
  {

  }
])

let handleSubmit = () => {
  if (form.value.touzi1.length == 0) {
    UIHelper.showMsg("骰子1不能为空")
    return
  }
  if (form.value.touzi2.length == 0) {
    UIHelper.showMsg("骰子2不能为空")
    return
  }
  let touzi1: number = parseInt(form.value.touzi1)
  let touzi2: number = parseInt(form.value.touzi2)
  let tableid:number = parseInt(form.value.tableid)
  if (isNaN(touzi1)) {
    UIHelper.showMsg("骰子1请输入数字")
    return
  }
  if (isNaN(touzi2)) {
    UIHelper.showMsg("骰子2请输入数字")
    return
  }
  if (touzi1 < 1 || touzi1 > 6) {
    UIHelper.showMsg("骰子1允许1-6")
    return
  }
  if (touzi1 < 1 || touzi1 > 6) {
    UIHelper.showMsg("骰子2允许1-6")
    return
  }
  if (isNaN(tableid)) {
    UIHelper.showMsg("请输入桌子数字")
    return
  }
  HttpClient.yuxiaxie_control(touzi1, touzi2, tableid)
  //   HttpClient.update_system_setting(GameConfig.System_Setting.customer, form.value.val, ()=>{
  //     UIHelper.showMsg("修改成功")
  //   })
}

onMounted(() => {

  onclickSearch()
})

const onclickSearch = () => {
  Logger.log("onclickSearch=", selectDate)
  let startTime: number = Math.floor(selectDate.value[0].getTime() / 1000)
  let endTime: number = Math.floor(selectDate.value[1].getTime() / 1000)
  HttpClient.get_yuxiaxie_control(startTime, endTime, (dataList: Array<object>) => {
    list.splice(0)
    for (let i = 0; i < dataList.length; i++) {
      let data: object = {
        "id": dataList[i]["id"],
        "operator": dataList[i]["operator"],
        "r1": dataList[i]["r1"],
        "r2": dataList[i]["r2"],
        "score": dataList[i]["score"],
        "tableid": dataList[i]["tableid"],
        "zhuang": dataList[i]["zhuang"],
        "time":DateUtil.formatDateStr(dataList[i]["dtime"]*1000)
      }
      list[i] = data
    }

  })
}

</script>
        
<style scoped lang="scss">
.header {
  display: flex;
  padding: 16px 16px 0 16px;
  margin-bottom: 16px;
  border-radius: 4px;
  background: white;
  box-shadow: 0 0 12px rgb(0 0 0 / 5%);

  .search-form {
    flex: 1;

    ::v-deep {
      .el-input--default {
        width: 200px;
      }
    }
  }

  .search {
    flex-shrink: 0;
    white-space: nowrap;
  }
}
</style>
        